<template>
  <div class="goods1">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul>
        <li
          v-for="(item, index) in searchList"
          :key="index"
          @click="jumpTo(item.proid)"
        >
          <img :src="item.img1" alt="" />
          <div class="goods_main">
            <p>{{ item.proname }}</p>
            <span>￥{{ item.originprice }}</span>
          </div>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
import { Icon, List } from "vant";
import { search } from "../../apis/search";

Vue.use(Toast);
Vue.use(Icon);
Vue.use(List);

export default {
  name: "SearchList",

  data() {
    return {
      value: this.$route.params.keyword,
      count: 1,
      searchList: [],
      loading: false,
      finished: false,
    };
  },

  mounted() {},

  methods: {
    jumpTo(proid) {
      this.$router.push("/pro/detail/" + proid);
    },
    onLoad() {
      // this.loading = true;
      search({ count: this.count, limitNum: 12 }).then((data) => {
        setTimeout(() => {
          this.loading = false;
          if (data.code == "10002") {
            this.finished = true;
          } else if (data.code == "200") {
            console.log(data.data.data);
            this.searchList = [...this.searchList, ...data.data.data];
            this.count++;
          }
          this.finished = true;
        }, 1500);
      });
    },
    getsearch() {
      search({
        count: 1,
        limitNum: 12,
        keyword: this.$route.params.keyword,
      }).then((res) => {
        switch (res.data.code) {
          case "10002":
            Toast.fail("抱歉，暂未找到相关的商品");
            this.searchList=""
            break;
          case "200":
            this.searchList = res.data.data;
            break;

          default:
            break;
        }
        // console.log(res.data);
      });
    },
  },
  created() {
    this.getsearch()
  },
  watch: {
    $route: {
      handler: function () {
        // console.log(val);
        this.getsearch()
        // console.log(this.searchList)
      },
      // 深度观察监听
      deep: true,
    },
  },
};
</script>

<style  scoped>
.goods_main {
  padding: 0.1rem;
}
.goods1 {
  margin-top: 0.2rem;
}
.van-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.goods1 ul {
  columns: 1 auto;
  width: 95%;
  /* flex-wrap: wrap;
  justify-content: space-around; */
}

.goods1 ul li {
  margin-top: 0.1rem;
  /* width: 50%; */
  background-color: #fff;
  border-radius: 0.1rem;
}
.goods_main p:nth-child(1) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.goods_main span {
  color: rgb(255, 65, 66);
  font-size: 0.23rem;
}
.goods1 ul li img {
  /* height: 100%; */
  width: 100%;
  border-radius: 0.1rem 0.1rem 0 0;
}
</style>